<template>
	<view>

		<!-- 页首 -->
		<zw-header></zw-header>

		<view class="goods">
			<view class="imgBox">
				<image :src="chooseImg"></image>
				<view class="smallImg">
					<view class="scrollbutton"  @click="leftClick"><u-icon name="arrow-left" color="#fff" size="40"></u-icon></view>
					<view calss="imageMenu">
						<scroll-view class="scroll__wrap" :scroll-x="true" :scroll-left="scrollto">
							<view class="scroll__item"	@click="change(i,url)" :class="chooseImg==url?'scroll__act':''" v-for="(url, i) in details.cover.split(',')" :key="i">
								<image :src="url" ></image>
							</view>
							
						</scroll-view>
					</view>
					<view class="scrollbutton" @click="rightClick"><u-icon name="arrow-right" color="#fff" size="40"></u-icon></view>
				</view>
			</view>
			<view class="goodsMain">
				<view class="goodsInfo">
					<view class="goodsTit">{{details.combinationName}}</view>
					<view class="goodsPrice">
						<view class="price"><text>￥<text class="bgPrice">{{details.price}}</text></text></view>
						<view class="sellNum">
							<view class="line"></view>
							<view class="sellBox"><text>{{details.sellNum}}</text><a>销量</a></view>
						</view>
					</view>
					<view class="scrollBox">
						
						<view class="skuBox" >
							<view class="skuName">数量</view>
							<view class="numBox">
								<view class="numBtn" @click="getRemove()"><u-icon name="minus" size='30' style="color: #707070;"></u-icon></view>
								<view class="centerNum">{{payNum}}</view>
								<view class="numBtn" @click="getAdd()"><u-icon name="plus" size='30' style="color: #707070;"></u-icon></view>
								
							</view>
						</view>
					</view>
				</view>
				<view class="goodsBtn" @click="toBuy" v-if='details.stock>0'>
					<view class="cart btnBox">立即支付</view>
				</view>
				<view class="goodsBtn" v-else>
					<view class="noStock btnBox">暂无库存</view>
				</view>
			</view>
			<view class="sellerBox">
				<view class="sellerLogo"><image :src="seller.logo"></image></view>
				<view class="sellerName">{{seller.name}}</view>
				<view class="line"></view>
				<view class="sellerRow">
					<text>店铺地址:<text>{{seller.address}}</text></text>
				</view>
				<view class="sellerRow">
					<text>联系方式:<text>{{seller.contactPhone}}</text></text>
				</view>
				<view class="sellerRow">
					<text>营业时间:
						<text v-if="seller.openHoursEnd == seller.openHoursStart">全天</text>
						<text v-else>{{seller.openHoursStart}} - {{seller.openHoursEnd}}</text>
					</text>
				</view>
			</view>
		</view>	

		<view class="sketchBox">
			<view class="sketchText" :class="sketch==0?'sketchFlag':''" @click="sketch = 0">套餐商品</view>
			<view class="sketchLine"></view>
			<view class="sketchText" :class="sketch==1?'sketchFlag':''" @click="sketch = 1">套餐评价({{totalCount}})</view>
		</view>
		
		<view class="goods-sketch" v-if="sketch==0">
			<view class="goodsItem" v-for="(goods,i) in details.prList" :key="i" @click="toDetail('/pages/goods/index?id='+goods.id)">
				<image :src="goods.logo"></image>
				<view class="goodsPrice">
					<text class="price">¥{{goods.price}}<text class="market" v-if="goods.marketPrice">¥{{goods.marketPrice}}</text></text>
				</view>
				<view class="goodsName elip_2">{{goods.productName}}</view>
				<view class="goodsTip">
					<text></text>
					<text>数量:{{goods.number}}</text>
					
				</view>
			</view>
		</view>	
		<view class="goods-comment" v-else>
			<view class="nullInfo" v-if="evaluateList.length==0">
				<image src="../../static/image/common/order.png" mode="widthFix"></image>
				暂无商品评价~
			</view>
			<view class="commentList">
				<view class="commentBox" v-for="(row,i) in evaluateList" :key="i">
					<view class="user">
						<image :src="row.headImg"></image>
						<view class="userInfo">
							<view class="name">
								<text>{{checkName(row.nickName)}}</text>
								<u-rate :count="5" :disabled='true' inactive-icon='star-fill' v-model="row.productScore" size='40' active-color='#e93323'></u-rate>
							</view>
							<view class="tip">{{row.createTime | formatDate('-')}}</view>
							<view class="comment">{{row.comment}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
		</view>
		<!-- 导航栏 -->
		

		<!-- 概述 -->
		
		<tool-bar :scrollTop="scrollTop"></tool-bar>
		
		

		

		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import pagination from '../../components/common/pagination.vue'
	import toolBar from '@/components/home/tool-bar.vue';
	import {
		getAccToken
	} from '@/userToken.js'
	export default {
		components: {
			pagination,
			toolBar,
		},
		data() {
			return {
				navs: [{
						name: '概述',
						key: 'sketch'
					},
					{
						name: '参数',
						key: 'specs'
					},
					{
						name: '用户评价',
						key: 'comment'
					}
				],
				scrollto:'',
				specificationsValues: [],
				specList: [],
				skus: [],
				specs:'',
				specsData: {},//用户选中具体规格
				sketch:0,
				details: {cover:','},
				scrollTop: 0,
				chooseImg:'',
				seller:{},
				infoList:[],
				productSkuId:'',
				price:'',
				logo:'',
				payNum: 1,
				pageNum:1,
				totalSize:12,
				evaluateList:[],
				totalCount:0,
				id:''
			}
		},
		onLoad(e) {
			if (!e.id) {
				uni.redirectTo({
					url: '/pages/index'
				});
				return;
			}
			this.id = e.id;
			this.findGoodsDetail(e.id);
			// this.getComment(e.id)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			change(index,url){
				this.chooseImg = url
				if(index>2){
					this.scrollto = Number((index - 1)*80)
					
				}else{
					this.scrollto = 0
				}
			},
			leftClick(){
				if(this.scrollto==0){
					return
				}
				this.scrollto = Number(this.scrollto - 80)
			},
			rightClick(){
				var len = this.details.logo.split(',').length
				if(this.scrollto == Number((len - 3) * 80) ){
					return
				}
				this.scrollto = Number(this.scrollto + 80)
				
			},
			checkName(item){
				if(item.length>2){
					var star = item.substr(0,1)
					var end = item.substr(Number(item.length - 1),item.length)
					return star + '**' + end
				}else{
					var star = item.substr(0,1)
					return star + '**'
				}
			},
			//查询商品评价
			getComment(id){
				uni.request({
					url: this.serverUrl + '/user/product/comment',
					method: 'POST',
					data:{
						pageNum:1,
						pageSize:20,
						productDiscountId:id
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.evaluateList = res.data.data.list;
							this.totalCount = res.data.data.totalCount;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							
						}
					}
				})
			},
			
			//查询商品详情
			findGoodsDetail(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.serverUrl + '/user/product/combinationByCombinationId/' + id,
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code == 0 || res.data.code == 200) {
							this.details = res.data.data
							this.chooseImg = String(res.data.data.cover).split(',')[0]
							this.seller = res.data.data.seller
							setTimeout(() => {
								// 修改网站标题
								uni.setNavigationBarTitle({
									title: `${res.data.data.combinationName} - 翼宝商城`
								});
								
								
							}, 100);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							this.$alert('当前商品不存在或已下架', {
								cancelText: '返回首页',
								confirmText: '看看其它商品'
							}, () => {
								uni.redirectTo({
									url: '/pages/search/index'
								});
							}, () => {
								uni.redirectTo({
									url: '/pages/index'
								});
							});
						}
					}
				})
				
			},
			
			// 购买
			toBuy() {
				if (!getAccToken()) {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}
				
				uni.navigateTo({
					url:'/pages/order/checkout?id=' + this.details.id + '&type=1' + '&payNum='+this.payNum
				})
				
				
				
			},
			pageChange(e) {
				this.pageNum = e;
				this.evaluateList = [];
				this.getComment(this.id);
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			getAdd(){
				if(this.payNum<this.details.stock){
					this.payNum++
				}else{
					uni.showToast({
						icon:'none',
						title:'库存不足'
					})
				}
			},
			getRemove(){
				if(this.payNum>=this.details.stock){
					uni.showToast({
						icon:'none',
						title:'库存不足'
					})
					return
				}
				if(this.payNum>1){
					this.payNum--
				}else{
					uni.showToast({
						icon:'none',
						title:'最低购买一件'
					})
				}
			},
			
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '.', k=' ' , mh=':') {
				let data = new Date(value);
					
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			},
			
		
		}
	}
</script>

<style lang="scss">
	@import '@/common/styles/simditor';
	.sketchBox{
		max-width: $page-width;
		min-width: $page-minwidth;
		@extend %flex-align-center;
		margin: 20px auto;
		height: 40px;
		.sketchText{
			width: 130px;
			height: 40px;
			justify-content: center;
			font-size: 16px;
			cursor: pointer;
			@extend %flex-align-center;
			border-bottom: 2px solid #fff;
		}
		.sketchLine{
			width: 1px;height: 25px;background: #c1c1c1;
		}
		.sketchText:hover{
			color: #e93323;
		}
		.sketchFlag{
			border-bottom: 2px solid #e93323;
			color: #e93323;
		}
	}
	.goods{
		::-webkit-scrollbar {
			display: none;  
			width: 0 !important;  
			height: 0 !important;  
			-webkit-appearance: none;  
			background: transparent;  
		}
		
		max-width: $page-width;
		min-width: $page-minwidth;
		padding: 10px 0;
		margin: 0 auto;
		min-height: 500px;
		display: flex;align-items: flex-start;
		justify-content: space-between;
		
		.goodsMain{
			width: 535px;
			.goodsBtn{
				@extend %flex-align-center;
				justify-content: flex-end;
				.btnBox{
					@extend %flex-align-center;
					justify-content: center;
					width: 300px;
					height: 45px;
					border: 1px solid #e93323;
					border-radius: 4px;
					font-size: 16px;
					color: #e93323;
					cursor: pointer;
				}
				.cart{
					background-color: #e93323;
					color: #fff;margin-right: 25px;
				}
				.noStock{
					background-color: #d8d8d8;
					color: #999;
					border: none;
					width: 300px;
				}
			}
			.goodsInfo{
				width: 535px;
				
				.scrollBox{
					min-height: 240px;
					margin-top: 20px;
					.skuBox{
						display: flex;align-items: flex-start;
						.skuName{
							width: 65px;margin-left: 15px;padding: 9px 0;color: #888;
						}
						.numBox{
							@extend %flex-align-center;
							.numBtn{
								width: 37px;height:37px;@extend %flex-align-center;justify-content: center;
								border: 1px solid #d3d3d3;
								cursor: pointer;
							}
							.centerNum{
								@extend %flex-align-center;justify-content: center;
								width: 60px;height:37px;
								border: 1px solid #d3d3d3;
								border-left: none;
								border-right: none;
							}
						}
						.specsBox{
							display: flex;align-items: flex-start;
							.specsDetail-specs{
								padding: 8px 12px;border: 1px solid #d3d3d3;margin-bottom: 20px;margin-right: 15px;
								cursor: pointer;position: relative;
								image{
									width: 30px;height: 30px;position: absolute;right: -4px;bottom: -4px;
								}
							}
							.specsSelect{
								border: 1px solid #e93323;
							}
						}
					}
					
				}
				.goodsTit{
					font-size: 20px;
					line-height: 26px;
					color: #333;
				}
				.goodsPrice{
					height: 75px;margin-top: 20px;
					@extend %flex-align-center;
					justify-content: space-between;
					background: linear-gradient(to right, rgb(233,51,35), rgb(233, 53, 37),rgb(233, 72, 44),rgb(244,55,75));
					.price{
						font-size: 23px;color: #fff;margin-left: 15px;
						.bgPrice{font-size: 33px;}
					}
					.sellNum{
						@extend %flex-align-center;
						.line{width: 1px;height: 40px;background:rgba(255,255,255,0.3);}
						.sellBox{
							margin: 0 20px;
							@extend %flex-align-center;flex-direction: column;
							color: #fff;
							text{font-size: 22px;}
						}
					}
					
					
				}
			}
		}
		.imgBox{
			width: 380px;height: 380px;
			image{
				width: 380px;height: 380px;
			}
			.smallImg{
				@extend %flex-align-center;
				justify-content: space-between;
				margin-top: 20px;
				.scrollbutton{
					cursor: pointer;
					width: 25px;@extend %flex-align-center;
					justify-content: center;
					height: 80px;
					background: #e0e0e0;
				}
				.imageMenu{
					width: 320px;
				}
				.scroll__wrap {
					white-space: nowrap;
					width: 320px;
				}
				.scroll__item {
					display: inline-block;
					margin-right: 10px;
					height: 78px;
					width: 78px;
					overflow: hidden;
				}
				.scroll__act {
					border: 2px solid #e93323;
				}
				image{
					width:100%;height: 100%;
					ertical-align: bottom;display:block;
				}
			}
			
			
		}
		.sellerBox{
			width: 230px;padding: 10px;
			justify-content: flex-start;flex-direction: column;
			border: 1px solid #e9cbcb;@extend %flex-align-center;
			.sellerLogo{
				image{width: 70px;height: 70px;border-radius: 50%;}
			}
			.sellerName{font-size: 16px;color: #000;font-weight: bold;margin-top: 3px;}
			.line{width: 100%;height: 1px;background: #ddd;margin: 6px 0;}
			.sellerRow{
				width: 100%;@extend %flex-align-center;justify-content: flex-start;flex-wrap: wrap;
				margin-bottom: 6px;font-size: 13px;color: #777;
			}
		}
	}
	
	.goods-comment{
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 0 auto;
		margin-top: 10px;
		.nullInfo{
			@extend %flex-align-center;flex-direction: column;
			image{
				width: 350px;
			}
		}
		.commentList{
			width: 100%;
			padding-bottom: 30px;
			.commentBox{
				margin-bottom: 20px;
				.user{
					display: flex;align-items: flex-start;
					image{width: 50px;height: 50px;border-radius: 50%;margin-right: 15px;}
					.userInfo{
						width: calc(100% - 70px);padding-bottom: 20px;
						border-bottom: 1px solid #ddd;
						.name{
							@extend %flex-align-center;text{margin-right:10px}
						}
						.tip{color: #999;margin-top: 5px;}
						.comment{
							margin-top: 10px;
							background: #eee;
							padding: 10px;
						}
					}
					
				}
			}
		}
	}
	.goods-sketch {
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 0 auto;
		margin-top: 10px;padding-bottom: 30px;
		@extend %flex-align-center;
		.goodsItem{
			
			image{
				width: 202px;
				height: 202px;
			}
			position: relative;
			display: flex;align-items: center;flex-direction: column;
			width: 224px;
			height: 325px;
			background-color: #fffff;
			padding: 10px;
			margin: 15.5px 15.5px 0 0;
			cursor: pointer;
		
			.goodsName{
				padding: 0 10px;width: 202px;color: #4f4f4f;font-size: 15px;
				display: flex;justify-content: flex-start;align-items: center;
			}
			.goodsTip{
				display: flex;justify-content: space-between;align-items: center;
				padding: 0 10px;width: 202px;color: #999;font-size: 14px;position: absolute;
				bottom:16px;
			}
			.goodsPrice{
				padding: 5px 10px;width: 202px;
				display: flex;justify-content: flex-start;align-items: center;
				.price{
					font-size: 22px; font-weight: 700;color: #e93323;
				}
				.market{
					color: #aaa;font-weight: 500;
					font-size: 12px;
					text-decoration: line-through;
					margin-left: 8px;
				}
			}
		}
		.goodsItem:hover{
			box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
			
		}
		::v-deep img {
			width: 100%;
			margin-top: -4px;
			object-fit: cover;
		}
	}

</style>
